<template>
  <div id="app">
      <nav class="nav has-shadow">
        <div class="container">
          <div class="nav-left">
            <a class="nav-item">
              <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma logo">
            </a>
            <router-link active-class='is-active' to="home" class="nav-item is-tab is-hidden-mobile ">主页</router-link>
            <router-link active-class='is-active' to="news" class="nav-item is-tab is-hidden-mobile ">新闻</router-link>
            <router-link active-class='is-active' to="button" class="nav-item is-tab is-hidden-mobile ">按钮</router-link>
            <router-link active-class='is-active' to="about" class="nav-item is-tab is-hidden-mobile ">关于我们</router-link>
          </div>
          <span class="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <div class="nav-right nav-menu">
            <a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
            <a class="nav-item is-tab is-hidden-tablet">Features</a>
            <a class="nav-item is-tab is-hidden-tablet">Pricing</a>
            <a class="nav-item is-tab is-hidden-tablet">About</a>
            <router-link active-class='is-active' to="user-info" class="nav-item is-tab">
              <figure class="image is-16x16" style="margin-right: 8px;">
                <img src="http://bulma.io/images/jgthms.png">
              </figure>
              China
            </router-link>
            
            <router-link active-class='is-active' to="logout"  class="nav-item is-tab">退出</router-link>
          </div>
        </div>
      </nav>

     <!--<router-link to="home">主页</router-link>
     <router-link to="news">新闻</router-link>
     <router-link to="button">button</router-link>-->
     <router-view></router-view>
     <footer class="footer">
        <div class="container">
          <div class="content has-text-centered">
            <p>
              <strong>Bulma</strong> by China.
            </p>
          </div>
        </div>
      </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'iView'
    }
  }
}
</script>

<style>

</style>
